{% extends 'layout.html' %}

{% block content %}
    <div class="container">
        <!--加上10px边距-->
        <div style="margin-bottom: 10px">
            <!--
            <input type="button" value="新建订单" class="btn btn-success" data-toggle="modal" data-target="#myModal">
            -->
            <input id="btnAdd" type="button" value="新建订单" class="btn btn-success">
        </div>

        <div class="bs-example" data-example-id="panel-without-body-with-table">
            <div class="panel panel-default">
              <!-- Default panel contents -->

                  <div class="panel-heading">
                      <!-- 加上字体图标（bootstrap）-->
                      <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                      订单列表
                  </div>

              <!-- Table -->
              <!-- <table class="table"> 列与列之间加上边框-->
                <table class="table table-bordered">
                    <thead>
                      <tr>
                        <th>ID</th>
                        <th>订单号</th>
                        <th>名称</th>
                        <th>价格</th>
                        <th>状态</th>
                        <th>管理员</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody>
                        {% for obj in queryset %}
                          <tr uid="{{ obj.id }}">
                            <th>{{ obj.id }}</th>
                            <td>{{ obj.oid }}</td>
                            <td>{{ obj.title}}</td>
                            <td>{{ obj.price }}</td>
                            <!--显示中文-->
                            <td>{{ obj.get_status_display }}</td>
                            <td>{{ obj.admin.username }}</td>
                            <td>
                                <!-- btn-xs 按钮大小-->
                                <input uid="{{ obj.id }}" type="button" class="btn btn-primary btn-xs btn-edit" value="编辑">
                                <input uid="{{ obj.id }}" class="btn btn-danger btn-xs btn-delete" type="button" value="删除">
                            </td>
                          </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
            <ul class="pagination">
            {{ page_string }}
            </ul>
    </div>

    <!-- 新建订单-对话框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel"></h4>
          </div>
          <div class="modal-body">
                <form id="formAdd">
                    <div class="clearfix">
                        {% for field in form %}
                            <div class="col-xs-6">
                            <div class="form-group" style="position: relative;margin-bottom: 20px;">
                                <label>{{ field.label }}</label>
                                {{ field }}
                                <span class="error-msg" style="color: red;position: absolute;"></span>
                                <!--<input type="text" class="form-control" placeholder="姓名" name="user"/>-->
                            </div>
                            </div>
                            <!-- {{ field.label }} : {{ field }} -->
                        {% endfor %}
                    </div>
                </form>
          </div>
          <div class="modal-footer">
             <button id="btnSave" type="button" class="btn btn-primary">保存</button>
             <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 删除订单-对话框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="alert alert-danger alert-dismissible fade in" role="alert">
          <h4>是否确定要删除？</h4>
          <p style="margin: 20px 0;">确定删除后，所有关联的相关数据都会被删除！</p>
          <p style="text-align: right;">
            <button id="btnConfirmDelete" type="button" class="btn btn-danger">确 定</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
          </p>
        </div>
      </div>
    </div>

{% endblock %}

{% block js %}
    <script type="text/javascript">
        //定义一个全局变量储存要删除的数据ID
        var DELETE_ID;
        var EDIT_ID;

        $(function (){
            bindBtnAddEvent();
            bindBtnSaveEvent();
            bindBtnDeleteEvent();
            bindBtnConfirmDeleteEvent();
            bindBtnEditEvent();
        })

        function bindBtnAddEvent(){
            $("#btnAdd").click(function (){
                // 编辑和新建共用一个页面，编辑点保存的时候，实际上是新建一条数据了，所以这里要做设置
                // 将ID设置为空,如果之前点过编辑，这里ID是有编辑的值的
                EDIT_ID = undefined;
                // 每次点新建订单都要清空对话框数据
                $("#formAdd")[0].reset();
                // 修改对话框标题
                $('#myModalLabel').text("新建");
                // 显示对话框
                $('#myModal').modal('show');
            });
        }

        function bindBtnSaveEvent() {
            $("#btnSave").click(function (){
                // 清除之前操作的错误信息，初始化
                $(".error-msg").empty();

                if (EDIT_ID) {
                    // 编辑
                    doEdit();
                } else {
                    // 新建
                    doAdd();
                }

                // ajax提交数据
                /*
                $.ajax({
                    url: "/order/add/",
                    type: "post",
                    // 发送数据到后台
                    data:$("#formAdd").serialize(),
                    // 格式转化
                    dataType: "JSON",
                    // 返回一个结果
                    success: function (res) {
                        //debugger;
                       if(res.status){
                           // alert("创建成功");
                           // 清空表单，jQuery对象$("#formAdd")-->转化为DOM对象$("#formAdd")[0]，调用reset()功能清空表单
                           $("#formAdd")[0].reset();
                           // 关闭对话框
                           $('#myModal').modal('hide');
                           // 添加数据成功后刷新订单列表
                           location.reload();
                       }else{
                           // 否则，把错误的信息显示在对话框中,循环错误信息
                           $.each(res.error, function (name, errorList) {

                               $("#id_" + name).next().text(errorList[0])
                           })
                       }
                    }
                })
                */
            })
        }

        function doAdd(){
            $.ajax({
                    url: "/order/add/",
                    type: "post",
                    // 发送数据到后台
                    data:$("#formAdd").serialize(),
                    // 格式转化
                    dataType: "JSON",
                    // 返回一个结果
                    success: function (res) {
                        //debugger;
                       if(res.status){
                           // alert("创建成功");
                           // 清空表单，jQuery对象$("#formAdd")-->转化为DOM对象$("#formAdd")[0]，调用reset()功能清空表单
                           $("#formAdd")[0].reset();
                           // 关闭对话框
                           $('#myModal').modal('hide');
                           // 添加数据成功后刷新订单列表
                           location.reload();
                       }else{
                           // 否则，把错误的信息显示在对话框中,循环错误信息
                           $.each(res.error, function (name, errorList) {

                               $("#id_" + name).next().text(errorList[0])
                           })
                       }
                    }
                })
        }

        function doEdit(){
            $.ajax({
                    url: "/order/edit/" + "?uid=" + EDIT_ID,
                    type: "post",
                    // 发送数据到后台
                    data:$("#formAdd").serialize(),
                    // 格式转化
                    dataType: "JSON",
                    // 返回一个结果
                    success: function (res) {
                        //debugger;
                       if(res.status){
                           // alert("创建成功");
                           // 清空表单，jQuery对象$("#formAdd")-->转化为DOM对象$("#formAdd")[0]，调用reset()功能清空表单
                           $("#formAdd")[0].reset();
                           // 关闭对话框
                           $('#myModal').modal('hide');
                           // 添加数据成功后刷新订单列表
                           location.reload();
                       }else{
                           if (res.tips){
                                alert(res.tips);
                           }else {
                           // 否则，把错误的信息显示在对话框中,循环错误信息
                           $.each(res.error, function (name, errorList) {

                               $("#id_" + name).next().text(errorList[0])
                           })
                           }
                       }
                    }
                })
        }

        function bindBtnDeleteEvent(){
            $(".btn-delete").click(function (){
                // alert("删除");
                // 显示要删除的对话框
                $('#deleteModal').modal('show');
                // 获取当前行的ID并赋值给全局变量
                DELETE_ID = $(this).attr("uid");
                // console.log(DELETE_ID);
            });
        }

        function bindBtnConfirmDeleteEvent(){
            $("#btnConfirmDelete").click(function (){
                // 点击确认删除按钮，将全局变量中存储的ID发送到后台。
                $.ajax({
                    url: "/order/delete/",
                    type: "GET",
                    data: {
                        uid: DELETE_ID
                    },
                    // url拼接后的形态: /order/delete/?uid=123
                    dataType: "JSON",
                    success: function (res){
                        if(res.status){
                            // 以下是JS 方法删除
                            // alert("删除成功")
                            // 隐藏删除框
                            /*
                            $('#deleteModal').modal('hide');
                            // 删除当前订单列表的这一行的ID数据
                            $("tr[uid='" + DELETE_ID + "']").remove();
                            // 全局变量置空
                            DELETE_ID = 0;
                            */

                            // 另外一种更简单的思路,删除并刷新订单列表
                            location.reload();


                        } else {
                            // 删除失败
                            alert(res.error);
                        }
                    }
                })
            });
        }

        function bindBtnEditEvent(){
            $(".btn-edit").click(function (){
             // 每次点编辑订单都要清空对话框数据
            $("#formAdd")[0].reset();
            // 获取当前行的id
            var uid = $(this).attr("uid");
            EDIT_ID = uid;

            // 发送Ajax请求去后台获取当前行的相关数据    /order/detail/?uid=123
            $.ajax({
                url: "/order/detail/",
                type: "get",
                data: {
                    uid: uid
                },
                dataType: "JSON",
                success: function (res){
                    if (res.status){
                        // 将数据赋值到对话框中的标签中
                        $.each(res.data, function (name, value){
                            $("#id_" + name).val(value);
                        })
                        // 修改对话框标题
                        $('#myModalLabel').text("编辑");
                        // 显示模态框
                        $('#myModal').modal('show');
                    }else {
                        alert(res.error);
                    }
                }
            })
            });
        }


    </script>

{% endblock %}